import React, { createContext } from 'react';
import { DispatchProp, connect } from 'dva';
import SearchForm from './components/SearchForm';
import { StateType, Advertise } from './model';
import { AddItemBar } from '@/components/AddItemBar';
import ListTable from './components/ListTable';
import { StoreState } from '@/common/store/store';

interface ListProps extends StateType, DispatchProp {
  loading?: boolean;
}

export const ListContext = createContext<List>({} as any);

// eslint-disable-next-line react/prefer-stateless-function
export class List extends React.Component<ListProps> {
  handleSearch() {}

  handleUpdate(payload: Advertise) {
    const { dispatch } = this.props;
    dispatch({
      type: 'advertise/update',
      payload,
    });
  }

  handleRemove(id: number) {
    const { dispatch } = this.props;
    dispatch({
      type: 'advertise/remove',
      id,
    });
  }

  render() {
    return (
      <ListContext.Provider value={this}>
        <div className="row-group">
          <SearchForm onSearch={this.handleSearch} />
          <AddItemBar href="/marketing/adList/form">添加广告</AddItemBar>
          <ListTable {...this.props} />
        </div>
      </ListContext.Provider>
    );
  }
}

const mapStateToProps = (state: StoreState) => ({
  list: state.advertise.list,
  loading: state.loading.models.advertise,
});

export default connect(mapStateToProps)(List);
